<!--  -->
<template>
  <div class="proofread-list-wrap scrolToMinView list-wrap">
    <div class="list-colum-width">
      <div
        class="proofread-item js-scroll-el"
        :class="{
          'pass-status': +item.pass === 1,
          'fail-status': +item.pass === 2,
        }"
        v-for="(item, i) in renderData"
        :key="item.id"
      >
        <div class="right-top-num">
          <span>{{ item.word }}</span>
        </div>
        <div class="sentence-content" @click="itemClickHandle(item)">
          <p
            class="source-line"
          ></p>
          <!--            :style="{ 'background-color': sourceLineColor(item) }"-->
          <div class="sentence-index">
            <span>{{ i + 1 }}</span>
          </div>
          <div>
            <p
              class="main-grammar"
              :class="{
                'grammar-hidden': item.clickNum >= 1 && item.clickNum % 2 === 1,
              }"
            >
              <span>{{ item.word }}</span>
              <img
                class="play-btn"
                src="@/assets/reverse/audio-play.png"
                alt=""
              />
            </p>
            <p
              class="main-grammar"
              :class="{ 'grammar-hidden': item.clickNum === 0 }"
            >
              {{ item.translation }}
            </p>
          </div>
        </div>
        <div class="check-grammar" >
            <span
                v-if="item.pass == 0"
                class="study-pop-content"
                slot="content"
                @click.stop="startStudy(item, i)"
            >开始学习</span>
          <span
              v-if="item.pass == 1 || item.pass == 2"
              class="study-pop-content"
              slot="content"
              @click.stop="startStudy(item, i)"
          >重新学习</span>
<!--          <a-popover-->
<!--            transitionName=""-->
<!--            :overlayClassName="-->
<!--              +item.pass === 1 ? 'study-popover__disabled' : 'study-popover'-->
<!--            "-->
<!--            :getPopupContainer="(target) => target.parentNode"-->
<!--            :visible="item.visible"-->
<!--            :destroyTooltipOnHide="true"-->
<!--            placement="bottomRight"-->
<!--            trigger="click"-->
<!--          >-->
<!--          -->
<!--            <img class="more-icon" src="@/assets/reverse/point.png" alt="" />-->
<!--          </a-popover>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Popover } from "ant-design-vue";

import $ from "jquery";
export default {
  name: "proofreadList",
  components: {
    APopover: Popover,
  },
  data() {
    return {
      audio: {},
      visibles: {},
    };
  },
  props: {
    renderData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    goStudy: {
      type: Function,
    },
  },
  computed: {},
  watch: {},
  methods: {
    outPopClick(oi) {
      if (typeof oi == "object") {
        if (
          this.renderData[this.lastvi] &&
          this.renderData[this.lastvi].visible == true
        ) {
          $(".ant-popover-open").trigger("click");
        }
      } else {
        for (let i in this.renderData) {
          if (typeof oi == "string" && oi == i) continue;
          this.$set(this.renderData[i], "visible", false);
        }
      }
    },
    sourceLineColor(item) {
      let bgc = "";
      // switch (item.source) {
      //   case 1:
      //     bgc = "#FF8383";
      //     break;
      //   case 2:
      //     bgc = "#FF971D";
      //     break;
      //   case 3:
      //     bgc = "#2E7EF5";
      //     break;
      //   default:
      //     bgc = "transparent";
      // }
      // return bgc;
    },
    studyItemClick(item, i) {
      i = Number(i).toString();
      this.outPopClick(i);
      this.lastvi = i;
      this.$set(item, "visible", !item.visible);
    },
    startStudy(item, index) {
      // console.log(item)
      // console.log(index)
      this.$emit("goStudy", item, index);
    },
    itemClickHandle(item) {
      let n = item.clickNum ? item.clickNum + 1 : 1;
      this.$set(item, "clickNum", n);
      if (item.voiceFile) {
        this.audio.src = 'https://yypx-1331574292.cos.ap-beijing.myqcloud.com/'+item.voiceFile;

        this.audio.addEventListener('canplay',()=>{
          this.audio.play();
        })
      }
    },
  },
  created() {
    document.body.addEventListener("click", this.outPopClick);
  },
  mounted() {
    this.audio = document.getElementById("reverse-audio");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    document.body.removeEventListener("click", this.outPopClick);
  },
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
/* @import url(); 引入公共css类 */

.proofread-list-wrap {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  .proofread-item {
    position: relative;
    width: 830px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    padding: 30px 10px 30px 30px;
    background-color: #fff;
    border-radius: 10px;
    text-align: left;
    margin-bottom: 20px;
    transition: box-shadow 0.3s;
    &:hover {
      box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
    }
    .sentence-index {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      height: 100%;
      & > span {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background-color: #eeeeee;
        text-align: center;
        line-height: 34px;
        font-size: 20px;
        color: #333;
        margin: 2px 10px 0 0;
      }
    }
    .right-top-num {
      position: absolute;
      right: -20px;
      top: -20px;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: @primary-color;
      break-inside: avoid;
      & > span {
        position: absolute;
        color: #fff;
        left: 10px;
        bottom: 6px;
        break-inside: avoid;
      }
    }
    .sentence-content {
      flex: 1;
      display: flex;
    }

    &.pass-status,
    &.fail-status {
      background-size: 70px 70px;
      background-position: bottom right;
      background-repeat: no-repeat;
    }
    &.pass-status {
      background-image: url("@/assets/reverse/pass-icon.png");
    }
    &.fail-status {
      background-image: url("@/assets/reverse/fail-icon.png");
    }

    .source-line {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 80px;
      width: 6px;
      //background-color: #ff971d;
      border-radius: 8px;
    }

    .main-grammar {
      font-size: 24px;
      &:nth-child(1) {
        font-weight: 700;
      }
      &.grammar-hidden {
        visibility: hidden;
      }
    }
    .play-btn {
      width: 20px;
      height: 20px;
      margin-left: 10px;
    }
    .check-grammar {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 88px;
      color: #27C3B5;
    }
  }
  @media screen and (max-width: 1200px) {
    .proofread-item {
      margin-right: 0;
    }
  }
}
</style>
